<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js选项卡类似js导航菜单的js tab选项卡切换效果</title>
<meta name="description" content="js选项卡制作一个类似js导航菜单的js选项卡切换特效，内含js代码下载。" />
<style type="text/css">
/*全局样式*/
*{font-size:12px;}
body{margin:0;padding:0;background-color:#FFFFFF;font-size:12px;color:#666666;font-family:"宋体",Arial, Helvetica, sans-serif;}
a{color:#5e5e5;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
/*主导航菜单*/
#menu ul{padding:0;border:0;list-style:none;line-height:150%;margin-top:0;margin-right:0;margin-bottom:0;margin-left:15px;}
#menu_out{width:966px;padding-left:4px;margin:50px auto;background:url(images/menu_left.gif) no-repeat left top;}
#menu_in{background:url(images/menu_right.gif) no-repeat right top;padding-right:4px;}
#menu{background:url(images/menu_bg.gif) repeat-x;height:73px;}
.menu_line{background:url(images/menu_line.gif) no-repeat center top;width:8px;}
.menu_line2{background:url(images/menu_line2.gif) no-repeat center top;width:15px;}
#nav{padding-left:20px;}
#nav li{float:left;height:35px;}
#nav li a{float:left;display:block;padding-left:6px;height:35px;background:url(images/menu_on_left.gif) no-repeat left top;cursor:pointer;text-decoration:none;}
#nav li a span{float:left;padding:11px 14px 10px 10px;line-height:14px;background:url(images/menu_on_right.gif) no-repeat right top;font-size:14px;font-weight:bold;color:#FFFFFF;text-decoration:none;}
#nav li .current{background-position:left 100%;}
#nav li .current span{background-position:right 100%;color:#333333;text-decoration:none;padding:14px 14px 7px 10px;}
/*子栏目*/
#menu_con{text-align:left;padding-left:20px;clear:both;}
#menu_con li{float:left;height:22px;margin-top:8px;}
#menu_con li a{display:block;float:left;background:url(images/menu_on_left2.gif) no-repeat left top;cursor:pointer;padding-left:3px;}
#menu_con li a span{float:left;padding:6px 10px 4px 10px;line-height:12px;background:url(images/menu_on_right2.gif) no-repeat right top;}
#menu_con li a:hover{text-decoration:none;background:url(images/menu_on_left2.gif) no-repeat left bottom;}
#menu_con li a:hover span{background:url(images/menu_on_right2.gif) no-repeat right bottom;}
</style>
</head>
<body>

<script type="text/javascript">
function setContentTab(name, curr, n) {
    for (i = 1; i <= n; i++) {
        var menu = document.getElementById(name + i);
        var cont = document.getElementById("con_" + name + "_" + i);
        menu.className = i == curr ? "current" : "";
        if (i == curr) {
            cont.style.display = "block";
        } else {
            cont.style.display = "none";
        }
    }
}
</script> 

<div id="menu_out">
	<div id="menu_in">
		<div id="menu">
			<ul id="nav">
				<li><a href="http://www.jsfoot.com/" id="one1" onmouseover="setContentTab('one',1,6)" class="current"><span>首 页</span></a></li>
				<li class="menu_line"></li>
				<li><a href="http://www.jsfoot.com/jquery/" id="one2" onmouseover="setContentTab('one',2,6)"><span>jquery 特效</span></a></li>
				<li class="menu_line"></li>
				<li><a href="http://www.jsfoot.com/js/" id="one3" onmouseover="setContentTab('one',3,6)"><span>javascript特效</span></a></li>
				<li class="menu_line"></li>
				<li><a href="http://www.jsfoot.com/flash/" id="one4" onmouseover="setContentTab('one',4,6)"><span>flash特效</span></a></li>
				<li class="menu_line"></li>
				<li><a href="http://www.jsfoot.com/css3/" id="one5" onmouseover="setContentTab('one',5,6)"><span>div+css教程</span></a></li>
				<li class="menu_line"></li>
				<li><a href="http://www.jsfoot.com/html5/" id="one6" onmouseover="setContentTab('one',6,6)"><span>html5教程</span></a></li>				
			</ul><!--nav end-->
			<div id="menu_con">
				<div id="con_one_1" style="display:block">
					<ul>
						<li>jsfoot 网页特效主要有jquery 特效 js特效 flash特效 div+css教程 html5教程</li>
					</ul>
				</div> 
				<div id="con_one_2" style="display:none">
					<ul>
						<li><a href="http://www.jsfoot.com/jquery/images/"><span>jquery图片特效</span></a></li>
						<li class="menu_line2"></li>
						<li><a href="http://www.jsfoot.com/jquery/menu/"><span>jquery导航菜单</span></a></li>
						<li class="menu_line2"></li>
						<li><a href="http://www.jsfoot.com/jquery/xxk/"><span>jquery选项卡特效</span></a></li>
						<li class="menu_line2"></li>
						<li><a href="http://www.jsfoot.com/jquery/letter/"><span>jquery文字特效</span></a></li>
						<li class="menu_line2"></li>
						<li><a href="http://www.jsfoot.com/jquery/form/"><span>jquery表单特效</span></a></li>
						<li class="menu_line2"></li>
						<li><a href="http://www.jsfoot.com/jquery/table/"><span>jquery表格特效</span></a></li>
					</ul>
				</div>
				<div id="con_one_3" style="display:none">
					<ul>
						<li><a href="http://www.jsfoot.com/js/images/"><span>js图片特效</span></a></li>
						<li class="menu_line2"></li>
						<li><a href="http://www.jsfoot.com/js/menu/"><span>js导航菜单</span></a></li>
						<li class="menu_line2"></li>
						<li><a href="http://www.jsfoot.com/js/xxk/"><span>js选项卡特效</span></a></li>
						<li class="menu_line2"></li>
						<li><a href="http://www.jsfoot.com/js/letter/"><span>js文字特效</span></a></li>
						<li class="menu_line2"></li>
						<li><a href="http://www.jsfoot.com/js/form/"><span>js表单特效</span></a></li>
						<li class="menu_line2"></li>
						<li><a href="http://www.jsfoot.com/js/table/"><span>js表格特效</span></a></li>
					</ul>
				</div>
				<div id="con_one_4" style="display:none">
					<ul>
						<li><a href="http://www.jsfoot.com/flash/images/"><span>flash图片特效</span></a></li>
						<li class="menu_line2"></li>
						<li><a href="http://www.jsfoot.com/flash/menu/"><span>flash导航菜单</span></a></li>
						<li class="menu_line2"></li>
						<li><a href="http://www.jsfoot.com/flash/letter/"><span>flash文字特效</span></a></li>
					</ul>
				</div>
				<div id="con_one_5" style="display:none">
					<ul>
						<li><a href="http://www.jsfoot.com/css3/layout/"><span>div+css布局</span></a></li>
						<li class="menu_line2"></li>
						<li><a href="http://www.jsfoot.com/css3/menu/"><span>div+css菜单</span></a></li>
						<li class="menu_line2"></li>
						<li><a href="http://www.jsfoot.com/css3/css3/"><span>css3教程</span></a></li>
					</ul>
				</div>
				<div id="con_one_6" style="display:none">
					<ul>
						<li><a href="http://www.jsfoot.com/html5/tx/"><span>html5特效</span></a></li>
						<li class="menu_line2"></li>
						<li><a href="http://www.jsfoot.com/html5/tb/"><span>html5图表</span></a></li>
					</ul>
				</div>
			</div><!--menu_con end-->
		</div><!--menu end-->
	</div>
</div>

</body>
</html>